<template>
	<div class="container">
		<van-sidebar v-model="activeKey" class="left" @change="onChange">
			<van-sidebar-item title="推荐" />
			<van-sidebar-item title="女装" />
			<van-sidebar-item title="食品" />
			<van-sidebar-item title="男装" />
			<van-sidebar-item title="鞋包" />
			<van-sidebar-item title="母婴" />
			<van-sidebar-item title="手机" />
			<van-sidebar-item title="电器" />
			<van-sidebar-item title="内衣" />
			<van-sidebar-item title="美妆" />
			<van-sidebar-item title="百货" />
		</van-sidebar>
		<div class="col">
			<div class="img" v-for="item in classification" :key="item.id" @click="handleClassClick(item.id)">
				<img :src="item.img_url" alt="" />
				<span>  {{ item.title }}</span>
			</div>
			
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeKey: 0,
			classification:[],
		};
	},
	created() {
		this.onChange(1)
	},
	methods: {
		onChange(index) {
			// this.$notify({ type: 'primary', message: index });
			// console.log(index);
			this.$http.get('src/data/classification/classification'+ index + '.json').then(result=>{
				if(result.body.status === 0){
					this.classification = result.body.message;
				}
			})
		},
		// 只支持空调
		handleClassClick(id) {
			this.$router.push('/goodsList')
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	.col {
		width: 80%;
		display: flex;
		flex-wrap:wrap ;
		padding: 7px;
		justify-content: space-between;
		.img {
			text-align: center;
			width: 30%;
			padding-bottom:1.25rem;
			img {
				width: 100%;
			}
		}
	}
}
</style>
